<template>
  <!-- 结算组件 -->
  <view class="my-settle-container">
    <!-- 全选 -->
    <label class="radio">
      <radio color="#C00000" :checked="isfullChecked" @click="changeAllState" /><text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">￥{{totalPrice}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
  export default {
    name: "my-settle",
    data() {
      return {
        // 倒计时的秒数
        seconds: 3,
        // 定时器的id
        timer: null
      };
    },
    computed: {
      ...mapGetters('m_cart', ['checkedCount', 'total', 'totalPrice']),
      // ...mapGetters('m_user', ['addressStr']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
      isfullChecked() {
        return this.checkedCount === this.total
      }
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateRedirectInfo']),
      changeAllState() {
        this.updateAllGoodsState(!this.isfullChecked)
      },
      // 点击结算按钮
      async settlement() {
        // if (!this.token) return uni.$showMsg('请先登录！')
        if (!this.token) return this.delayNavigate()
        if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
        // if (!this.addressStr) return uni.$showMsg('请选择收货地址！')
        // -------------------------------------------------------------------------------------------
        // 请求商品库存信息，检查要购买的商品是否已经删除、下架、库存不足
        const buyGoods = this.cart.filter(item => item.goods_state === true)
        // 由于get请求对参数长度有限制，此处buyGoods太长，所以此处使用post请求
        const { data: res } = await uni.$http.post('/api/public/v1/goods/checkgoods', { buyGoods })
        if (res.meta.status !== 200) return uni.$showMsg('获取商品库存信息失败')
        const lastGoods = res.message.lastGoods
        // 首先检查商品是否已删除
        let errMsg = ''
        buyGoods.forEach(item => {
          let result = lastGoods.find(item2 => item2.goods_id === item.goods_id && item2.is_del === 0)
          if (!result) errMsg += `商品（ ${item.goods_name} ）已被删除\n`
        })
        if (errMsg) return uni.$showMsg(errMsg)
        // 商品都存在，接下来检查商品是否已下架
        errMsg = ''
        buyGoods.forEach(item => {
          let result = lastGoods.find(item2 => item2.goods_id === item.goods_id && item2.is_shelf === 1)
          if (!result) errMsg += `商品（ ${item.goods_name} ）已下架\n`
        })
        if (errMsg) return uni.$showMsg(errMsg)
        // 商品都已上架，接下来检查商品库存是否够
        errMsg = ''
        buyGoods.forEach(item => {
          let result = lastGoods.find(item2 => item2.goods_id === item.goods_id && item2.goods_count > item
            .goods_count)
          if (!result) errMsg += `商品（ ${item.goods_name} ）库存不足\n`
        })
        if (errMsg) return uni.$showMsg(errMsg)
        // 至此所有条件验证通过（是否已经删除、下架、库存不足）
        // -------------------------------------------------------------------------------------------
        // 跳转到支付页，传递购物车数据
        uni.navigateTo({
          // 由于购物车数据中有些自己添加的商品的图片是base64格式，在pay页面接收参数时JSON.parse不能够解析base64格式中的特殊字符，
          // 所以此处使用encodeURIComponent加密传输
          url: `/subpkg/pay/pay?cart=${encodeURIComponent(JSON.stringify(buyGoods))}`
          // url: `/subpkg/pay/pay?cart=${buyGoods}`
        })
        // 微信支付
        // this.payOrder()
      },
      // 展示倒计时的提示消息
      showTips(n) {
        uni.showToast({
          icon: 'none',
          title: '请登录后再结算！' + n + '秒后自动跳转到登录页',
          mask: true,
          duration: 1500
        })
      },
      // 延时导航到登录页面
      delayNavigate() {
        this.showTips(this.seconds)
        this.timer = setInterval(() => {
          this.seconds--
          if (this.seconds <= 0) {
            clearInterval(this.timer)
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                this.updateRedirectInfo({
                  // 跳转方式
                  openType: 'switchTab',
                  // 从哪个页面跳转过去的
                  from: '/pages/cart/cart'
                })
              }
            })
            // 重置延迟时间为3，否则，不登录时，第二次点击结算按钮，将不再延时跳转
            return this.seconds = 3 //下边的showTips不再执行
          }
          this.showTips(this.seconds)
        }, 1000)
      },
      // async payOrder() {
      //   // 1.创建订单
      //   // 1.1组织订单的信息对象
      //   const orderInfo = {
      //     // order_price: this.totalPrice,//开发时，订单价格写为0.01，测试用
      //     order_price: 0.01,
      //     consignee_addr: this.addressStr,
      //     goods: this.cart.filter(item => item.goods_state).map(item => ({
      //       goods_id: item.goods_id,
      //       goods_number: item.goods_number,
      //       goods_price: item.goods_price
      //     }))
      //   }
      //   // 1.2发起请求创建订单
      //   const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
      //   // if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
      //   // 1.3得到服务器响应的“订单编号”
      //   // const orderNumber = res.message.order_number
      //   // 这里由于接口问题，作如下处理
      //   if (res.meta.msg === '无效token') {
      //     // 这里 const 和 let 都不能使用，这两个声明的内容都是局部的，if外部访问不到
      //     var orderNumber = 'GD20180504000000000045'
      //   }
      //   // 2.订单预支付
      //   // 2.1发起请求获取订单的支付信息
      //   const { data: res2 } = await uni.$http.post(
      //     '/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
      //   // if (res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')
      //   // 2.3得到订单支付相关的必要参数
      //   // const payInfo = res2.message.pay
      //   // 由于接口问题，这里直接写死
      //   const payInfo = {
      //     "timeStamp": String(Date.now()),
      //     "nonceStr": "BkPggorBXZwPGXe3",
      //     "package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
      //     "signType": "MD5",
      //     "paySign": "D1642DEEF1663C8012EDEB9297E1D516"
      //   }
      //   // 3.发起微信支付
      //   // 3.1调用uni.requestPayment() 发起微信支付
      //   const [err, succ] = await uni.requestPayment(payInfo).catch(err => err)
      //   // 3.2未完成支付
      //   if (err) return uni.$showMsg('订单未支付！---接口问题')
      //   // 3.3完成了支付，进一步查询支付的结果
      //   const { data: res3 } = await uni.$http.post(
      //     '/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
      //   // 3.4检测到订单未支付
      //   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
      //   // 3.5检测到订到支付完成
      //   uni.showToast({
      //     title: '订单支付完成！',
      //     icon: 'success'
      //   })
      // }
    }
  }
</script>

<style lang="scss" scoped>
  .my-settle-container {
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;

    .radio {
      display: flex;
      align-items: center;
    }

    .amount-box {
      .amount {
        color: #C00000;
        font-weight: bold;
      }
    }

    .btn-settle {
      background-color: #C00000;
      color: white;
      line-height: 50px;
      min-width: 100px;
      text-align: center;
      padding: 0 10px;
    }
  }
</style>
